<template>
  <div>
    <el-card>
      <div class="chart">
        <chart ref="chart1" :options="option" :auto-resize="true"></chart>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {},
      orgOptions: {},
      colorList: [
        [
          '#ff7f50',
          '#87cefa',
          '#da70d6',
          '#32cd32',
          '#6495ed',
          '#ff69b4',
          '#ba55d3',
          '#cd5c5c',
          '#ffa500',
          '#40e0d0',
          '#1e90ff',
          '#ff6347',
          '#7b68ee',
          '#d0648a',
          '#ffd700',
          '#6b8e23',
          '#4ea397',
          '#3cb371',
          '#b8860b',
          '#7bd9a5'
        ],
        [
          '#ff7f50',
          '#87cefa',
          '#da70d6',
          '#32cd32',
          '#6495ed',
          '#ff69b4',
          '#ba55d3',
          '#cd5c5c',
          '#ffa500',
          '#40e0d0',
          '#1e90ff',
          '#ff6347',
          '#7b68ee',
          '#00fa9a',
          '#ffd700',
          '#6b8e23',
          '#ff00ff',
          '#3cb371',
          '#b8860b',
          '#30e0e0'
        ],
        [
          '#929fff',
          '#9de0ff',
          '#ffa897',
          '#af87fe',
          '#7dc3fe',
          '#bb60b2',
          '#433e7c',
          '#f47a75',
          '#009db2',
          '#024b51',
          '#0780cf',
          '#765005',
          '#e75840',
          '#26ccd8',
          '#3685fe',
          '#9977ef',
          '#f5616f',
          '#f7b13f',
          '#f9e264',
          '#50c48f'
        ]
      ][2]
    }
  },
  methods: {},
  mounted() {
    this.orgOptions = {
      // 图表标题
      title: {
        show: true, // 显示策略，默认值true,可选为：true（显示） | false（隐藏）
        text: '"新时代"主题图谱', // 主标题文本，'\n'指定换行
        x: 'center', // 水平安放位置，默认为左对齐，可选为：
        // 'center' ¦ 'left' ¦ 'right'
        // ¦ {number}（x坐标，单位px）
        y: 'bottom', // 垂直安放位置，默认为全图顶端，可选为：
        // 'top' ¦ 'bottom' ¦ 'center'
        // ¦ {number}（y坐标，单位px）
        // textAlign: null          // 水平对齐方式，默认根据x设置自动调整
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: '#ccc', // 标题边框颜色
        borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
        padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
        left: 0,
        top: 0,
        // 接受数组分别设定上右下左边距，同css
        itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
        textStyle: {
          fontSize: 18,
          fontWeight: 'bolder',
          color: '#333' // 主标题文字颜色
        },
        subtextStyle: {
          color: '#aaa' // 副标题文字颜色
        }
      },
      backgroundColor: '#fff',
      tooltip: {},
      animationDurationUpdate: function(idx) {
        // 越往后的数据延迟越大
        return idx * 100
      },
      animationEasingUpdate: 'bounceIn',
      color: ['#fff', '#fff', '#fff'],
      series: [
        {
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 400,
            edgeLength: 100
          },
          roam: true,
          label: {
            normal: {
              show: true
            }
          },
          data: [
            {
              name: '新冠肺炎愈后一般6个月内不会再得',
              value: 2373,
              symbolSize: 48,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[0],
                  color: this.colorList[0]
                }
              }
            },
            {
              name: '女篮两连胜后大喊武汉加油',
              value: 5449,
              symbolSize: 73,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[1],
                  color: this.colorList[1]
                }
              }
            },
            {
              name: '火神山医院开微博',
              value: 2289,
              symbolSize: 67,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[2],
                  color: this.colorList[2]
                }
              }
            },
            {
              name: '医疗队女队员集体理平头和光头',
              value: 2518,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[3],
                  color: this.colorList[3]
                }
              }
            },
            {
              name: '缅怀疫情中逝去的人们',
              value: 4730,
              symbolSize: 88,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[4],
                  color: this.colorList[4]
                }
              }
            },
            {
              name: '妨害疫情防控的违法行为',
              value: 1952,
              symbolSize: 55,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[5],
                  color: this.colorList[5]
                }
              }
            },
            {
              name: '66岁重症患者8天快速康复',
              value: 926,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[6],
                  color: this.colorList[6]
                }
              }
            },
            {
              name: '别让快递小哥一直等在寒风中',
              value: 4536,
              symbolSize: 67,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[7],
                  color: this.colorList[7]
                }
              }
            },
            {
              name: '湖北以外地区新增病例数连降5天',
              value: 750,
              symbolSize: 47,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[8],
                  color: this.colorList[8]
                }
              }
            },
            {
              name: '女儿写给战疫一线爸爸的信',
              value: 493,
              symbolSize: 82,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[9],
                  color: this.colorList[9]
                }
              }
            },
            {
              name: '青海连续3天无新增病例',
              value: 385,
              symbolSize: 59,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[10],
                  color: this.colorList[10]
                }
              }
            },
            {
              name: '辽宁再派1000名医护人员驰援武汉',
              value: 4960,
              symbolSize: 90,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[11],
                  color: this.colorList[11]
                }
              }
            },
            {
              name: '抗击新型肺炎第一线',
              value: 8694000,
              symbolSize: 134,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[12],
                  color: this.colorList[12]
                }
              }
            },
            {
              name: '12项疫情防控惠民政策',
              value: 5668,
              symbolSize: 75,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[13],
                  color: this.colorList[13]
                }
              }
            },
            {
              name: '战疫一线的别样团圆',
              value: 339,
              symbolSize: 68,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[14],
                  color: this.colorList[14]
                }
              }
            },
            {
              name: '31省区市心理援助热线',
              value: 671,
              symbolSize: 62,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[15],
                  color: this.colorList[15]
                }
              }
            },
            {
              name: '元宵节亮灯为武汉加油',
              value: 27000,
              symbolSize: 114,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[16],
                  color: this.colorList[16]
                }
              }
            },
            {
              name: '抗击新型肺炎我们在行动',
              value: 10777000,
              symbolSize: 130,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[17],
                  color: this.colorList[17]
                }
              }
            },
            {
              name: '疫情中的逆行者',
              value: 92000,
              symbolSize: 123,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[18],
                  color: this.colorList[18]
                }
              }
            },
            {
              name: '一张图看懂新冠肺炎',
              value: 20000,
              symbolSize: 141,
              draggable: true,
              itemStyle: {
                normal: {
                  shadowBlur: 100,
                  shadowColor: this.colorList[19],
                  color: this.colorList[19]
                }
              },
              url: 'https://gallery.echartsjs.com/preview.html?c=xPLngHx_Z&v=1'
            }
          ]
        }
      ]
    }
    this.option = {
      title: [
        {
          text: '今日煤矿煤炭产品销售预览',
          x: 'center',
          textStyle: {
            fontSize: 20
          }
        },
        {
          text: '内外块粉比',
          x: '19.8%',
          y: '45%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            fontSize: 20
          }
        },
        {
          text: '块粉比',
          x: '49.8%',
          y: '45%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            fontSize: 20
          }
        },
        {
          text: '内外比',
          x: '79.8%',
          y: '45%',
          textAlign: 'center',
          textBaseline: 'middle',
          textStyle: {
            fontSize: 20
          }
        },
        {
          text: '34106.24吨',
          x: 'center',
          y: '8%',
          subtext: '2019-05-20 15:19:32',
          textStyle: {
            fontSize: 80
          }
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: [
        {
          data: ['外销', '内销'],
          x: '25%',
          y: '60%'
        },
        {
          data: [
            '外销块煤',
            '内销块煤',
            '外销面煤',
            '内销面煤',
            '块煤',
            '面煤'
          ],
          x: 'left',
          orient: 'vertical'
        }
      ],
      grid: [
        {
          left: '0%',
          right: '55%',
          top: '65%',
          bottom: '5%',
          containLabel: true
        },
        {
          gridindex: 1,
          left: '48%',
          right: '3%',
          top: '65%',
          bottom: '5%',
          containLabel: true
        }
      ],
      xAxis: [
        {
          type: 'value',
          axisLabel: {
            formatter: '{value} 吨'
          },
          boundaryGap: [0, 0.01]
        },
        {
          gridIndex: 1,
          type: 'category',
          boundaryGap: false,
          data: [
            '0时',
            '1时',
            '2时',
            '3时',
            '4时',
            '5时',
            '6时',
            '7时',
            '8时',
            '9时',
            '10时',
            '11时',
            '12时',
            '13时',
            '14时',
            '15时',
            '16时',
            '17时',
            '18时',
            '19时',
            '20时',
            '21时',
            '22时',
            '23时'
          ]
        }
      ],
      yAxis: [
        {
          type: 'category',
          data: [
            '块煤大块',
            '块煤4-8',
            '块煤3-6',
            '块煤2-4',
            '块煤1-3',
            '块煤0.5-1',
            '面煤',
            '电面煤',
            '电块煤',
            '劣质煤'
          ],
          axisLabel: {
            interval: 0
          }
        },
        {
          gridIndex: 1,
          type: 'value',
          axisLabel: {
            formatter: '{value} 吨'
          }
        }
      ],
      series: [
        {
          name: '外销',
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'right'
            }
          },
          data: [
            1576.28,
            840.18,
            997.15,
            1865.25,
            3026.62,
            877.09,
            6361.68,
            0,
            0,
            1188.28
          ]
        },
        {
          name: '内销',
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'right'
            }
          },
          data: [
            44.67,
            11.94,
            123.67,
            20.28,
            62.46,
            29.62,
            1362.29,
            10127.0,
            3909.78,
            1682.0
          ]
        },
        {
          name: '大煤种',
          type: 'pie',
          center: ['20%', '45%'],
          radius: ['15%', '20%'],
          label: {
            normal: {
              formatter: '{b} :{c}吨({d}%)'
            }
          },
          data: [
            {
              value: 9182.57,
              name: '外销块煤'
            },
            {
              value: 4202.42,
              name: '内销块煤'
            },
            {
              value: 6361.68,
              name: '外销面煤'
            },
            {
              value: 11489.29,
              name: '内销面煤'
            }
          ]
        },
        {
          name: '块粉比',
          type: 'pie',
          center: ['50%', '45%'],
          radius: ['15%', '20%'],
          label: {
            normal: {
              formatter: '{b} :{c}吨({d}%)'
            }
          },
          data: [
            {
              value: 13384.99,
              name: '块煤'
            },
            {
              value: 17850.97,
              name: '面煤'
            }
          ]
        },
        {
          name: '内外比',
          type: 'pie',
          center: ['80%', '45%'],
          radius: ['15%', '20%'],
          label: {
            normal: {
              formatter: '{b} :{c}吨({d}%)'
            }
          },
          data: [
            {
              value: 15544.25,
              name: '外销'
            },
            {
              value: 15691.71,
              name: '内销'
            }
          ]
        },
        {
          xAxisIndex: 1,
          yAxisIndex: 1,
          name: '分时统计',
          type: 'line',
          lineStyle: {
            normal: {
              color: '#4ea397'
            }
          },
          data: [
            '516.48',
            '482.46',
            '418.74',
            '284.66',
            '315.28',
            '365.34',
            '657.19',
            '3054.78',
            '4127.51',
            '5180.03',
            '5416.46',
            '4113.99',
            '3021.61',
            '4191.89',
            '3437.5',
            '1250.22'
          ],
          markPoint: {
            data: [
              {
                type: 'max',
                name: '最大值',
                symbolSize: 80
              },
              {
                type: 'min',
                name: '最小值',
                symbolSize: 50
              }
            ],
            itemStyle: {
              normal: {
                color: '#d0648a'
              }
            }
          },
          markLine: {
            data: [
              {
                type: 'average',
                name: '平均值'
              }
            ]
          }
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  // height: 800px;
  text-align: center;
  margin-left: 200px;
}

.echarts {
  width: 1200px;
  height: 900px;
}

element.style {
  position: relative;
  width: 1200px;
  height: 900px;
  padding: 0px;
  margin: 0px;
  border-width: 0px;
  cursor: default;
}
</style>
